<template>
  <div>
    <div class="serve-dv" @click="SearchServe(obj.serve_id)">
        <div class="serve-dv-img">
            <img :src="obj.serve_img" alt="">
        </div>
        <div class="sreve-dv-text">
            <p class="serve-dv-title"> {{ obj.serve_name }} </p>
            <p class="serve-dv-info">服务对象：{{ obj.serve_obj }} </p>
            <div class="serve-dv-lable">
                <span class="label01">随访服务</span>
                <span class="label02">常规处理</span>
            </div>
            <div class="serve-dv-state" :style={background:bgColor}>
                {{ stateText }}
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    created(){
        this.stateLoad()
        document.querySelector('body').setAttribute('style', 'background-color:#F2F7FB')
    },
    props:{
        obj:{
            type:Object
        },
    },
    methods:{
        stateLoad(){
            if(this.obj.serve_status==1){
                this.stateText = "使用中"
                this.bgColor = "#2984F8"
            }else if(this.obj.serve_status==2){
                this.stateText = "待审核"
                this.bgColor = "#28D094"
            }else if(this.obj.serve_status==3){
                this.stateText = "已停用"
                this.bgColor = "#FDDB78"
            }else if(this.obj.serve_status==4){
                this.stateText = "已驳回"
                this.bgColor = "#FA746B"
            }
        },
        SearchServe(id){
            this.$router.push({
                path:"/SearchServePage",
                query:{
                    id:id
                }
            })
        }
    },
    data() {
        return {
            stateText:"",
            bgColor:"red"
        }
    },
}
</script>

<style>
    .serve-dv{
        width: 350px;
        height: 150px;
        border-radius: 10px;
        box-shadow: 0 0 4px darkgray;
        position: relative;
        padding: 25px 20px;
        box-sizing: border-box;
        display: flex;
        overflow: hidden;
        background: white;
        transition: 0.3s;
        margin-bottom: 20px;
        cursor: pointer;
        margin-left: 13px;
    }
    .serve-dv:hover{
        box-shadow: 0 0 0px darkgray;
        background: #F2F7FB;
    }
    .serve-dv-title{
        margin-top: 5px;
    }
    .serve-dv-img{
        width: 135px;
        height: 100%;
        /* background: darkgray; */
    }
    .serve-dv-img img{
        width: 100%;
        height: 100%;
    }
    .sreve-dv-text{
        margin-left: 15px;
    }
    .serve-dv-info{
        color: darkgray;
        font-size: 13px;
        margin-top: 20px;
    }
    .serve-dv-lable{
        margin-top: 20px;
    }
    .label01{
        width: 70px;
        height: 25px;
        display: inline-block;
        background: #FEE3E1;
        border-radius: 20px;
        color: #fa8178;
        line-height: 25px;
        text-align: center;
        font-size: 13px;
    }
    .label02{
        width: 70px;
        height: 25px;
        display: inline-block;
        background: #D1EEE6;
        margin-left: 10px;
        border-radius: 20px;
        color: #52ae94;
        line-height: 25px;
        text-align: center;
        font-size: 13px;
    }
    .serve-dv-state{
        width: 100px;
        height: 25px;
        text-align: center;
        color: white;
        line-height: 25px;
        /* background: rgb(250, 170, 170); */
        font-size: 14px;
        transform: rotate(45deg);
        position: absolute;
        right: -30px;
        top: 10px;
        font-size: 13px;
    }
</style>